@import './variables';

body,
html,
#app-root {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  min-width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  font-size: var(--sqltools-fontSize);
  font-family: var(--sqltools-fontFamily);
  color: var(--sqltools-color);
  background: var(--sqltools-backgroundColor);
}
input, select {
  color: var(--sqltools-color);
}
body {
  composes: fullscreenContainer from './generic.m.scss';

  ::-webkit-scrollbar-corner {
    display: none;
  }
}

hr {
  border: none;
  border-top: 1px solid var(--sqltools-BWColor4);
}

* {
  box-sizing: border-box;
  outline: none;
  &::before, &::after {
    box-sizing: border-box;
  }
}

input, select, select > option {
  border-radius: 0;
  background: var(--vscode-settings-textInputBackground);
  border: 1px solid var(--vscode-input-border);
  color: var(--vscode-settings-textInputForeground);
  vertical-align: middle;
  line-height: 26px;
  height: 26px;
  padding: 0px 8px;
  appearance: none;
  -webkit-appearance: none;
}

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--vscode-settings-textInputBackground);
  border: 1px solid transparent;
  height: 18px;
  width: 18px;
  padding: 0;
  margin: 0;
  margin-right: 9px;
  border-radius: 3px;
  position: relative;
  color: var(--vscode-settings-textInputForeground);
  &::before {
    position: absolute;
    content: '';
    display: block;
    top: 0px;
    left: 5px;
    width: 6px;
    height: 12px;
    border-style: solid;
    border-color: var(--vscode-settings-textInputForeground);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
  }
  &:checked {
    &::before {
      opacity: 1;
    }
  }
  &:hover, &:focus, &:active {
    border: 1px solid var(--vscode-input-border);
  }
}


input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display:none;
}

::-webkit-input-placeholder {
  color: var(--sqltools-BWColor4);
  text-transform: capitalize;
}

button {
  background: var(--sqltools-linkColorBg);
  padding: 4px 8px;
  color: var(--sqltools-linkColorFg);
  border: 1px solid var(--vscode-input-border);
  text-transform: uppercase;
  cursor: pointer;
  &:focus {
    outline: 1px solid var(--vscode-focusBorder);
    outline-offset: 2px;
  }
  &:disabled,
  &[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }
}

code, pre {
  font-family: var(--vscode-editor-font-family, var(--font-family));
}